<template>
    <div class="new">
        <div class="panel-body-1">
                <h5 class="text1">
                    <i class="fa fa-bar-chart"></i> 试卷类型预置
                </h5>
                <p class="text2">
                    预置与管理您需要的试卷类型！
                </p>
        </div>
        <div class="panel-body-2">
            <div class="head">
              <el-button plain class="iconbtn" @click="change1()">
                <i :class="icon"></i>
              </el-button>
                    <div class="text3">
                        <i class="fa fa-th fa-fw"></i>预置类型
                    </div>
                    <div class="text4">创建预置类型</div>
                    <div class="pull-right"></div>
            </div>
           <!-- 新建预置类型表单页面 -->
               <div  class="body-2-main" v-if='change==0' v-show="show">
                 <div>
                    <div class="left-form">
                        <form>
                                                    <div class="form-group-1">
                                                        <label class="xrequired"><a style="color:red">*&nbsp;</a>试卷名称</label>
                                                        <input class="form-control" id="kindName" v-model="name">
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="xrequired"><a style="color:red">*&nbsp;</a>试卷类型</label>
                                                        <select class="form-control" id="kind" v-model="student.id"> 
                                                            <option disabled value="">请选择</option>
                                                            <option>小学一年级</option>
                                                            <option>小学二年级</option>
                                                            <option>小学三年级</option>
                                                            <option>小学四年级</option>
                                                            <option>小学五年级</option>
                                                            <option>小学六年级</option>
                                                            <option>初中一年级</option>
                                                            <option>初中二年级</option>
                                                            <option>初中三年级</option>
                                                            <option>高中一年级</option>
                                                            <option>高中二年级</option>
                                                            <option>高中三年级</option>
                                                        </select>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="xrequired"><a style="color:red">*&nbsp;</a>试卷分数上限</label>
                                                        <input type="number" class="form-control" id="maximumScore" v-model="scores">
                                                    </div>

                                                    <div class="form-group">
                                                        <label>备注说明</label>
                                                        <textarea class="form-control-add" rows="5" id="remark" v-model="remark"></textarea>
                                                    </div>

                                                </form>
                    </div>
                    <div class="right-form">
                       <div class="col-lg-6">
                         <!-- 试卷密级选择 -->
                                                <form>
                                                    <div class="form-group-">
                                                        <label class="xrequired"><a style="color:red">*&nbsp;</a>密级设置</label>
                                                        <select class="form-control" id="secret" v-model="secret">
                                                            <option disabled value="">请选择</option>
                                                            <option>无密级</option>
                                                            <option>秘密</option>
                                                            <option>机密</option>
                                                            <option>绝密</option>
                                                        </select>
                                                    </div>
                                                    <div class="pre">
                                                    <form class="form-inline">
                                                        <div class="form-group-2">
                                                            <label>试卷题目预设</label>
                                                        </div>
                                                    </form>
                                                  <!-- 题目类型选择 -->
                                                    <form class="form-inline">
                                                        <div class="form-group-3" style="width: 85%">
                                                            <label class="sr-only">预设</label>
                                                            <select v-model="questionTypes.type" class="form-control" id="presetQuestions" style="width:100%" >
                                                                <option disabled value="">请选择</option>
                                                                <option>选择题</option>
                                                                <option>填空题</option>
                                                                <option>主观题（必修）</option>
                                                                <option>主观题（选修）</option>
                                                            </select>
                                                        </div>
                                                        <button type="button" class="btn btn-success" id="setPresetBtn" style="float:right" @click="add">添加</button>
                                                    </form>

                                                    <br><br>
                                                    <br>
                                                      <div v-for="(text,index) in texts" :key='index' :index='index'>
                                                        <a class="list-group-item list-group-item-info" data-toggle="tooltip" data-placement="top" title="" data-original-title="">
                                                          {{text}}<span class="badge close" @click="splice(index)">x</span>
                                                        </a>
                                                      </div>
                                                    </div>
                                                </form>
                                            </div>
                   </div>
                   <div class="last-btn">
                   <button type="button" class="btn last-btn-1" id="next-step" @click = nextstep>下一步</button>
                   </div>
                </div>
             </div>


             <!-- 点击下一步后的题目拖拽页 -->
             <div v-if='change==1' class="step-2-body">
                <div>
                  您当前可分配的分值为：{{scores}} 分
                  <div class="switch">
                      <a style="float:left;margin:20px 20px;color:black;font-size:16px;font-weight:normal">排序</a>
                      <input type="button" value="全局" @click="global" id="sortSwitch1"/>
                      <div style="height:34px"></div>
                      <input type="button" value="独立" @click="individual" id="sortSwitch2"/>
                  </div>

              <!-- 中部题目栏 -->
                <!-- 大题拖动 -->
                <draggable
                  :list="questions"
                  handle=".handle"
                  :options="{ forceFallback: true }"
                >
                  <!-- <div v-for="(text,index) in texts" :key='index'> -->
                  <div v-for="(question,index) in questions" :key='question.id'>
                      <h3 style="font-size: 24px;font-weight: 500;line-height: 1.1;margin-top: 20px;margin-bottom: 10px;">
                              <span class="handle">+</span>{{question.name}}</h3>
                    <!-- 小题拖动 -->
                        <div class="item questions">
                            <draggable
                                ghost-class="ghost"
                                disabled: false
                                :options="{group:{name: 'article',pull:'clone'},sort: false,forceFallback: true}"
                                @start="start"
                                @end="end"
                                :list="question.source"
                                class="dragArea"
                            >
                                <div class="item questions" v-for="(sourceItem,sourceIndex) in question.source" :key="sourceIndex">
                                    <div id="source1" class="source">
                                        <div class="shuffle-item">
                                            <div><label>序号</label><div class="index"></div></div>
                                            <div><label>分值</label><div class="source-score" @blur='changeScore(index, sourceIndex, $event)' style="color:red" contenteditable="true">{{question.source[0]}}</div></div>
                                        </div>
                                    </div>
                                </div>
                            </draggable>
                        </div>
                        <div class="target">
                            <div class="shuffle-item">
                                <draggable :options="{group:'article',forceFallback: true}"
                                    @start="start22"
                                    @end="end22"
                                    :list="question.details"
                                    class="dragArea11"
                                    :class="{undraggable : element.flag}">
                                        <div v-for="(targetItem,targetIndex) in question.details" :key="targetIndex" style="border:1px solid white;border-radius:4px">
                                            <label>序号</label>
                                            <div>{{targetIndex + 1}}</div>
                                            <label>分值</label>
                                            <div contenteditable="true" class="target-score" @blur='changeScore(index, targetIndex, $event)' style="color:red">{{targetItem}}</div>
                                        </div>
                                </draggable>
                            </div>
                        </div>
                      </div>
                    </draggable>
                 </div>
                <!-- </div> -->
                  <!-- 下按钮 -->
                  <div>
                    <button type="button" class="btn last-btn-11" id="next-step" @click="over">完&nbsp;&nbsp;成</button>
                    <button type="button" class="btn last-btn-22" id="next-step-1" @click="laststep">上一步</button>
                  </div>
            </div>
        </div>
    </div>
</template>
<script>
import draggable from "vuedraggable";
import {postJsonRequest} from "../utils/api"
import { log } from 'util';
export default {
  name: "simple",
  display: "Simple",
  order: 0,
    components: {
    draggable
  },
    data() {
      return {
        change:0,
        text:'',
        // 点击切换页面的收起和下放显示
        icon: "fa fa-caret-up",
        show: true,

        // 需post的接口数据
        name: '一年级数学期中试卷',
        student:{id: '小学一年级'},
        scores: '100',
        remark: '',
        secret: '无密级',
        questionTypes:[
          {type:{id: ''}},
          {rank: ''},
          {questionDetailRanks:[
            {scores: ''},
            {rank: ''},
          ]}
        ],
        owner:{id: ''},

        // 
        remark:'',
        data:'',
        global:'',
        individual:'',
        element:'',
        number:'1',
        newprebase:[],
        texts:['选择题','填空题','主观题（必修）','主观题（选修）'],
        questions:[{id:1, name:'选择题', source: [0], details: []},{id:2, name:'填空题', source: [0], details: []},{id:3, name: '主观题（必修）', source: [0], details: []},{id:4, name: '主观题（选修）', source: [0], details: []}],
        number1: 1,
        value: '',
        change2:false,
        dragging: false,
        disabled:false,
        falgs: 'article',
        score1:'',
        source1: [[0],[0],[0],[0]],
        target1: [[],[],[],[]],
        index: 0,
        flag:''
      };
    },
    methods: {
      // 页面的收起和下放
      change1() {
        this.show=!this.show;
      if(this.icon =="fa fa-caret-up")
      {
        this.icon ="fa fa-caret-down";
      }
      else{
        this.icon ="fa fa-caret-up"
      }
      },
      // 点击下一步按钮表单验证
      nextstep() {
        if(this.name=='') {
          this.$message({
          showClose: true,
          message: '试卷名称不能为空',
          type: 'error'
        })
        }else if(this.scores<=0) {
          this.$message({
          showClose: true,
          message: '分值不能小于零',
          type: 'error'
        })}else{
          this.change = 1
        }
      },
      // 点击按钮上一步
      laststep() {
        this.change = 0
      },

      // 点击完成按钮跳转到pre_base页面
      over() {
        this.$router.replace('/pre_base')
        postJsonRequest('/pre_base/save_pre_base',{
          name: this.name,
          stdent:{id: this.student.id},
          scores: this.scores,
          remark: this.remark,
          secret: this.secret,
          questionTypes:[
            {type:{id: ''}},
            {rank: ''},
            {questionDetailRanks:[
              {scores: ''},
              {rank: ''}
            ]}
          ],
          owner:{id: ''}
        }).then(res=>{
          // 打印返回结果
          console.log(res)
          // 判断返回结果
          if(res.status == 200) {
            this.$message({
              message: '添加成功！',
              type: 'success'
        })}
        else{
          this.$message.error('添加失败！')
          }
        }).catch(err => {
          console.log(err);
       });
      },
      // 动态添加试卷题目类型
      add() {
        this.texts.push(
          this.questionTypes.type 
        )
      },
      // 题型的动态添加和删除
      splice(index) {
        this.index=index,
        this.texts.splice(index,1)
      },

      // 拖拽有关的函数
      start() {
        
    },

      end () {
          console.log('是否触发 end');
    },
    start22 (event) {
      // this.falgs = '222222'
    },
    end22 (ev) {
      // this.falgs = 'article'
    },
    // 监听dom元素
    // 其中index是针对 questions 和 二级index
    changeScore(index, childIndex, event) {
        // 获取修改后的分数
        let score = Number(event.srcElement.innerText);
        let className = event.srcElement.className;
        // 判断是 source修改还是 target修改
        if(className === 'source-score') {
            console.log(this.questions[index].source[0]);
            
            this.questions[index].source[0] = score;
            console.log(this.questions[index].source[0]);
        } else if (className === 'target-score') {
            console.log('target');
            this.questions[index].details[childIndex] = score;
        }
    },
    // 题目拖拽的删除
    deletequestions() {
      
    }
    },
    // 渲染元素时弹框提示
    mounted() {
        this.$message({
          message: '我们已对试卷做出基本预设，您可以对它进行修改',
          type: 'success'
        });
      },
    // 阻止拖拽时火狐浏览器的自动搜索
      created() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
    },
    // 求题目设置分数的总和
    computed:{
     totalSumAll(){
      let totalSumAll = 0;
      this.dataInfo.map((item) => {totalSumAll += item.totalSum})
      return totalSumAll
  },
}
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.panel-body-1 {
margin: 20px 0;
background-color: white;
border: 1px solid transparent;
border-radius: 3px;
padding: 15px 0 15px 15px;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
text-align: left;
}

.panel-body-2 {
margin-bottom: 20px;
background-color: white;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
text-align: left;
overflow: hidden;
}
.iconbtn {
  float: right;
  margin-right: 15px;
}
.body-2-main {
  overflow: hidden;
}

.head {
  border-bottom: 1px solid #eeeeee;
  padding: 15px 0 15px 15px;
}

.text1 {
  font-size: 14px;
  font-weight: 400;
  color: black;
  margin: 0 0 0 0;
}

.text2 {
  font-size: 10px;
  color: #777777;
  margin: 0 0 0 0;
}

.text3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 0 0;
}

.text4 {
  font-size: 10px;
  margin: 0 0 0 0;
  color:#777777;
}

.switch {
  border: 1px solid #f0eded;
  width: 140px;
  height: 70px;
  box-shadow:1px 1px 1px 0.5px rgba(0, 0, 0, 0.075);
  border-radius: 4px;
  margin-top: 6px;
}

#sortSwitch1 {
  background-color: rgb(153, 207, 153);
  color:seashell;
  border: solid rgb(153, 207, 153);
  border-radius: 5px;
  height: 34px;
  width: 60px;
  float: right;
}
#sortSwitch2 {
  background-color: rgb(233, 206, 147);
  color:seashell;
  border: solid rgb(233, 206, 147);
  border-radius: 5px;
  height: 34px;
  width: 60px;
  float: right;
}
#sortSwitch1:hover{
  background-color: rgb(55, 156, 55);
  border-color: rgb(55, 156, 55);
}
#sortSwitch2:hover{
  background-color: orange;
  border-color: orange;
}


.list-group-item {
    transition: all 0.3s ease;
}

.list-group-item-info {
    background-color: #d9edf7;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    border: 1px solid #dddddd;
}

a {
    color: #ef4238;
    text-decoration: none;
    background: transparent;
}

.list-group-item:first-child {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.list-group-item > .badge {
    float: right;
}

.close {
    cursor: pointer;
}

.close {
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: black;
    text-shadow: 0 1px 0 white;
    opacity: 0.2;
}

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    vertical-align: baseline;
    white-space: nowrap;
    text-align: center;
    background-color: #777777;
    border-radius: 10px;
}

a.list-group-item-info {
    color: #31708f;
}

.pull-right {
    float: right !important;
}

.btn-group {
    border-color: gray;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    float: right;
}

.btn-default {
    color: #333333;
    background-color: white;
    border-color: #cccccc;
}

.btn {
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 3px;
    user-select: none;
    color: #333333;
    background-color: white;
    border-color: #cccccc;
}

.left-form {
    width: 48%;
    float: left;
    padding: 15px 5px 15px 15px;
}

.right-form {
    width: 48%;
    float: right;
    padding: 15px 15px 15px 10px;
}

.xrequired {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-inline .form-group {
    display: inline-block;
    vertical-align: middle;
}

.pre {
  margin: 18px 0;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555555;
    background-color: white;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control-add {
    display: block;
    width: 100%;
    height: 150px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555555;
    background-color: white;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

}

textarea {
    overflow: auto;
    height: auto;
    font: inherit;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group {
  margin: 20px 0;
}

.form-group-3 {
  float: left;
}

.btn-success {
    color: white;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

#setPresetBtn:hover{
  background-color: #009900;
}

.last-btn-1 {
    color: white;
    background-color: #5bc0de;
    border-color: #46b8da;
    height: 35px;
    width: 65px;
    float: right;
    margin-right: 30px;
}

.last-btn-11 {
    color: white;
    background-color: #5bc0de;
    border-color: #46b8da;
    height: 35px;
    width: 65px;
    float: right;
    margin-right: 30px;
}

.last-btn-22 {
    color: white;
    background-color: orange;
    border-color: orange;
    height: 35px;
    width: 65px;
    float: right;
    margin-right: 30px;
}

.last-btn {
    width: 100%;
    height: 50px;
    clear: both;
}

.step-2-body {
  margin:15px;
  font-size: 14px;
  line-height: 1.42857;
  color: #333333;
  max-width: 100%;
  font-weight: bold;
  overflow: hidden;
}

.handle {
    padding: 0 5px;
    margin-right: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: move;
}

.shuffle-item {
    text-align: left;
    margin: 5px;
    padding: 5px;
    border: solid 1px rgba(11,128,238,0.05);
    border-radius: 5px;
    background-color: rgba(11,128,238,0.05);
    transition: opacity 0.4s ease-in-out;
    color: black;
    cursor: pointer;
}

.item {
    margin: 5px;
    padding: 5px;
    border: solid 2px rgba(11,128,238,0.05);
}

.target {
  border: #eeeeee;
}

#next-step:hover{
  background-color: #3399CC;
}

#next-step-1:hover{
  background-color: #FF9900;
}

.content {
  height: 20px;
  margin: 5px;
  padding: 5px;
  border: solid 2px rgba(11,128,238,0.05);
}

#img {
  float: right;
  width: 20px;
}
</style>